<template>
    <ul class="goods-sales">
        <li>
            <p></p>
            <p></p>
            <p><i class="iconfont icon-task-filling"></i></p>
        </li>
        <li>
            <p></p>
            <p></p>
            <p><i class="iconfont icon-comment-filling"></i></p>
        </li>
        <li>
            <p></p>
            <p></p>
            <p><i class="iconfont icon-favorite-filling"></i></p>
        </li>
        <li>
            <p></p>
            <p></p>
            <p><i class="iconfont icon-dynamic-filling"></i></p>
        </li>
    </ul>
</template>
<script>
export default {
    name:'GoodsSales',
}
</script>
<style lang="less" scoped>
.goods-sales{
    display: flex;
    width: 400px;
    text-align: center;
    height: 140px;
    li {
        flex:1;
        position: relative;
        ~li::after {
            position: absolute;
            top: 10px;
            left: 0px;
            height: 60px;
            border-left: 1px solid #e4e4e4;
            content: "";
        }
        p {
            &:first-child {
                color:#999;
            }
            &:nth-child(2) {
                color:@priceColor;
                margin-top: 10px;
            }
            &:last-child {
                color:#666;
                margin-top: 10px;
                i {
                    color:@xtxColor;
                    font-size: 14px;
                    margin-right: 2px;
                }
                &:hover {
                    color: @xtxColor;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>